<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>计科院毕业生通讯录管理系统</title>
    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="bookmark" href="favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="../../easyui/css/default.css"/>
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css"/>
    <script type="text/javascript" src="../../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>

    <script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
    //定义一个Highcharts的变量，初始值为null
    var oChart = null;
    //定义oChart的布局环境
    //布局环境组成：X轴、Y轴、数据显示、图标标题
    var oOptions = {
//设置图表关联显示块和图形样式
        chart: {
            renderTo: 'container', //设置显示的页面块
            type: 'column'
        },
//图标标题
        title: {
            text: '毕业生报表', //设置标题
            //text: null, //设置null则不显示标题
        },
        credits: {//去除水印
            enabled: false
        },
//x轴
        xAxis: {
            type: 'category',
            labels: {
                rotation: -45  // 设置轴标签旋转角度
            }
        },
//y轴
        yAxis: {
            min: 0,
            title: {
                text: '人数 (个)'
            }
        },
        legend: {
            enabled: false
        },
//数据列
        series: [{
            data:[

            ]
        }]
    };
    $(document).ready(function(){
        oChart = new Highcharts.Chart(oOptions);
//异步添加第2条数据列
       // LoadSerie_Ajax();
    });
    //异步读取数据并加载到图表
    function LoadSerie_Ajax() {
        oChart.showLoading();
        var syear = $("#syear").val();
        var eyear = $("#eyear").val();
        $.ajax({
            url: "/gradestudent/reportlist?syear="+syear+"&eyear="+eyear+"&t="+new Date().getTime(),
            type : 'POST',
           //data: {syear: syear, eyear:eyear},
            dataType : 'json',
            async : false, //同步处理后面才能处理新添加的series
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success : function(resp){
                var seriesData = "[{type: 'column',name: 's1',data: ["+resp['date']+"]}]";
                oChart.update({
                    series:eval(seriesData)
                })
            }
        });
        oChart.hideLoading();
    }


</script>
</head>
<body>
<table>
    <tr>
        <td>
            毕业时间<input id="syear"   type="text" name="syear" value="2019"/>
-
            <input id="eyear"  type="text" name="eyear"  value="2021"/>
            <input type="button" onclick="LoadSerie_Ajax()" value="查询">
        </td>
    </tr>
    <tr>
        <td>
    <div id="container" style="min-width:400px;width:700px;height:400px;"></div>
        </td>
    </tr>
</table>
</body>
</html>
